<template>
<!-- 统计信息 -->
<div class="center-statistic">
    <info-card>
        <div class="title" slot="title">
            统计信息
        </div>
        <div class="info-items">
            <info-item 
            v-for="item in dataList" 
            :key="item.title"
            :data="item"
            @buy="buy"
            >
            </info-item>
        </div>
    </info-card>

    <dialog-product v-model="dialogVisible" :projectids="projectid" @close="queryStatisticData"></dialog-product>
</div>
    
</template>

<script>
import { mapGetters,mapActions } from 'vuex';
import InfoCard from '../components/info-card.vue';
import InfoItem from './components/item.vue';
import DialogProduct from '../components/dialog-product.vue';
export default {
    components:{InfoCard,InfoItem,DialogProduct},
    data() {
        return {
            dialogVisible:false,
            projectid:'',
        }
    },
    computed: {
        ...mapGetters({
            dataList: 'userinfo/getStatisticData',
        }),
    },
    methods: {
        ...mapActions({
            queryStatisticData: 'userinfo/queryStatisticData',
        }),
        buy(ids){
            this.dialogVisible = true;
            this.projectid = ids || '';
        }
    },
    mounted () {
        this.queryStatisticData();
    },
}
</script>

<style lang="scss" scoped>
@import '@css/var.scss';    

.center-statistic{
    .title {
        font-weight: bold;
    }

    .info-items {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }
}
</style>